<template>
    <div class="home-nav"><nav-bar-item>
        <div slot="middle">购物街</div>

    </nav-bar-item></div>
</template>

<script>
    import NavBarItem from "components/common/navbar/NavBarItem";
    import {getHomeMultiData} from "network/home/"
    import {getPlayList} from "network/playlist/"
    export default {
        name: "Home",
        components:{
            NavBarItem
        },
        data(){
            return{
                banner:{},
                recommend:{},
                list:[]
            }
        },
        created() {
            //getHomeMultiData方法内部中的this为undefined的原因可能是因为getHomeMultiData是独立函数(属于全局)
            //所以getHomeMultiData内部的this指向全局，在严格模式下，指向undefined
            //可以从外部传入_this或者使用箭头函数解决这个问题

            let _this=this;
            getHomeMultiData().then(function (ret) {
                let data=ret.data.data;
                //console.log(_this);
                _this.banner=data.banner;
                _this.recommend=data.recommend;
            })
            /*
            方法二：使用箭头函数
            getHomeMultiData().then(res=>{
                //箭头函数的this指向在定义的时候继承自外层第一个普通函数的this。
                let data=res.data.data;
                this.banner=data.banner;
                this.recommend=data.recommend;
            })*/
            let ids=[];
            let r=getPlayList().then(function (ret) {

                console.log("第一个then执行")
                /*setTimeout(function () {
                    console.log("setTimeout执行")
                },2000)*/
                return "1";
            }).then(function (ret) {
                console.log("第二个then执行");
                console.log(ret)
                return ret;
            })
            console.log("axios后面的代码执行")
            console.log(r)
            /*getPlayList().then(function (ret) {
                let data=ret.data.playlist.trackIds;
                for(let t in data){
                    _this.list.push(data[t].id)
                }
                console.log(_this.list[0])
            })*/

        },
        methods:{
            btnClick:function () {
                console.log(this);
            }
        }
    }
</script>

<style scoped>
    .home-nav{
        background-color: var(--color-tint);
        color: white;
    }
</style>